<template>
	<view class="tab-bar">

		<view class="wa dis_f_aro" v-if="state == 'company'">
			<view class="tab-bar-item" @click="switchTab(listCompany[0], 0)">
				<image class="tab_img wh48" :src="tabInd == 0 ? listCompany[0].iconPath_active : listCompany[0].iconPath" mode="widthFix"></image>
				<view class="tab_text" :style="{ color: tabInd == 0 ? activeCol : color }">{{listCompany[0].text}}</view>
			</view>
			<view class="tab-bar-item" @click="switchTab(listCompany[1], 1)">
				<image class="tab_img wh48" :src="tabInd == 1 ? listCompany[1].iconPath_active : listCompany[1].iconPath" mode="widthFix"></image>
				<view class="tab_text" :style="{ color: tabInd == 1 ? activeCol : color }">{{listCompany[1].text}}</view>
			</view>
			<view class="add_new_inner bg_f" @click="$com.toPage('/pagesCompany/release/list')">
				<view class="release_btn col_f tac">+</view>
				<view class="tac mt8 fz24" :style="{ color: color }">发布</view>
			</view>
			<view class="tab-bar-item dis_f_cc" @click="switchTab(listCompany[2], 2)">
				<view class="pos_rel m0_a">
					<image class="tab_img wh48" :src="tabInd == 2 ? listCompany[2].iconPath_active : listCompany[2].iconPath" mode="widthFix"></image>
					<view class="tab_text" :style="{ color: tabInd == 2 ? activeCol : color }">{{listCompany[2].text}}</view>
					<!-- <view class="red_point pos_abs"></view> -->
				</view>
			</view>
			<view class="tab-bar-item" @click="switchTab(listCompany[3], 3)">
				<image class="tab_img wh48" :src="tabInd == 3 ? listCompany[3].iconPath_active : listCompany[3].iconPath" mode="widthFix"></image>
				<view class="tab_text" :style="{ color: tabInd == 3 ? activeCol : color }">{{listCompany[3].text}}</view>
			</view>
		</view>

		<view v-for="(item,index) in list" :key="index" class="tab-bar-item pos_rel" @click="switchTab(item, index)" v-if="state !== 'company'">
			<image class="tab_img wh48" :src="tabInd == index ? item.iconPath_active : item.iconPath" mode="widthFix"></image>
			<view class="tab_text" :style="{ color: tabInd == index ? activeCol : color }">{{item.text}}</view>
		</view>

	</view>
</template>
<script>
	export default {
		props: {
			selectedIndex: { 			// 当前选中的tab index
				default: 0
			},
		},
		data() {
			return {
				color: "#C9CED3",
				activeCol: "#3771FF",
				tabInd: 0,
				list: [],
				state: '',
				listCompany: [
					{
						"pagePath": "/pagesCompany/index/index",
						"iconPath": "/static/tab/index.png",
						"iconPath_active": "/static/tab/index_a.png",
						"text": "首页"
					},
					{
						"pagePath": "/pagesCompany/board",
						"iconPath": "/static/tab/data.png",
						"iconPath_active": "/static/tab/data_a.png",
						"text": "看板"
					},
					{
						"pagePath": "/pagesCompany/alarm/index",
						"iconPath": "/static/tab/alarm.png",
						"iconPath_active": "/static/tab/alarm_a.png",
						"text": "告警"
					},
					{
						"pagePath": "/pages/my",
						"iconPath": "/static/tab/my.png",
						"iconPath_active": "/static/tab/my_a.png",
						"text": "我的"
					}
				],
				listPerson: [
					{
						"pagePath": "/pagesPerson/index/index",
						"iconPath": "/static/tab/index.png",
						"iconPath_active": "/static/tab/index_a.png",
						"text": "工作台"
					},
					{
						"pagePath": "/pagesPerson/monitor",
						"iconPath": "/static/tab/data.png",
						"iconPath_active": "/static/tab/data_a.png",
						"text": "综合监控"
					},
					{
						"pagePath": "/pagesPerson/record/index",
						"iconPath": "/static/tab/record.png",
						"iconPath_active": "/static/tab/record_a.png",
						"text": "记录"
					},
					{
						"pagePath": "/pages/my",
						"iconPath": "/static/tab/my.png",
						"iconPath_active": "/static/tab/my_a.png",
						"text": "我的"
					}
				],
				listCharcoal: [
					{
						"pagePath": "/pagesCharcoal/index/index",
						"iconPath": "/static/tab/index.png",
						"iconPath_active": "/static/tab/index_a.png",
						"text": "首页"
					},
					{
						"pagePath": "/pagesCharcoal/asset/index",
						"iconPath": "/static/tab/data.png",
						"iconPath_active": "/static/tab/data_a.png",
						"text": "资产运维"
					},
					{
						"pagePath": "/pagesCharcoal/intelligence/index",
						"iconPath": "/static/tab/intelligence.png",
						"iconPath_active": "/static/tab/intelligence_a.png",
						"text": "能炭大脑"
					},
					{
						"pagePath": "/pages/my",
						"iconPath": "/static/tab/my.png",
						"iconPath_active": "/static/tab/my_a.png",
						"text": "我的"
					}
				],
			}
		},
		created() {
			this.tabInd = this.selectedIndex;
			const state = uni.getStorageSync('identify');
			this.state = state;
			if ( state == 'company' ) {
			    // this.list = this.listCompany;			// 运维公司
			} else if ( state == 'charcoal' ) {
			    this.list = this.listCharcoal;			// 运维人员
			} else if ( state == 'person' ) {
			    this.list = this.listPerson;			// 能碳大脑
			}
		},
		methods: {
			switchTab(item, index) {
				// console.log(item,uni.getStorageSync('identify'))
				this.tabInd = index;
				uni.reLaunch({ url: item.pagePath })
			},
		}
	}
</script>
<style lang="scss">
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); /*适配iphoneX的底部*/
		border-top: 1px solid #e4e4e4;
		z-index: 9;

		.tab-bar-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			.tab_text {
				font-size: 20rpx;
				margin-top: 9rpx;
			}
		}
	}
	
	.add_new_inner{
		margin-top: -50rpx;
		flex-shrink: 0;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border-top: 1px solid #e4e4e4;
	}
	.release_btn{
		width: 74rpx;
		height: 74rpx;
		border-radius: 50%;
		background-color: #3771FF;
		font-size: 72rpx;
		line-height: 78rpx;
		margin: 13rpx auto 0;
	}
</style>